import Base from "../base.js";
import usersService from "../../service/usersService.js"
export default class extends Base {
  async getUsersByPage() {
    const result = await usersService.get(); //获取用户数据
    this.data = result;
    this.rerender();
  }

  //交互
  handle() {
    const that = this;
    //监听工具条 
    this.table.on('tool(table)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

      if (layEvent === 'upDate') { //查看
        that.update(data);
        layer.confirm("更新成功！")
      } else if (layEvent === 'del') { //删除
        layer.confirm('确认删除这个用户吗？', function (index) {
          that.remove(data);
          obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
          layer.close(index);
          //向服务端发送删除指令
        });
      }
    });
  }

  async remove(data){
    await usersService.remove(data);
    this.getUsersByPage();
  }
  async update(data){
    await usersService.update(data);
    this.getUsersByPage();
  }

  //渲染
  render() {
    const template = `
    <table id="table" lay-filter="table">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>用户列表</legend>
        </fieldset>
    </table>
                    `
    this.$el.html(template);
  }

  //重绘
  rerender() {
    this.table.render({
      elem: '#table',
      height: 470,
      data: this.data,
      page: true //开启分页
        ,
      cols: [
        [ //表头
          {
            field: '_id',
            title: '用户编号',
            align: 'center',
            fixed: 'left'
          }, {
            field: 'username',
            title: '用户姓名',
            align: 'center',
            'edit': 'text'
          }, {
            field: 'password',
            title: '用户密码',
            align: 'center',
          }, {
            field: "操作",
            title: "操作",
            align: 'center',
            toolbar: `
              <div>
                <a class="layui-btn layui-btn-xs " lay-event="upDate">更新</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
              </div>
        `
          }
        ]
      ]
    });
  }

  mounted() {
    this.getUsersByPage();
  }

}